<template>
  <div>
    <commonDetail
      class="commonDetail"
      :colSpan="8"
      :data="data"
      :definition="definition"
    >
      <template slot="key2">
        <el-button
          type="text"
          icon="el-icon-edit"
          style="padding: 0; margin-left: 4px; height: 18px; line-height: 18px"
          >编辑</el-button
        >
      </template>
      <template slot="key3">
        <div style="color: #386bd7">自定义内容</div>
        <el-button
          type="text"
          icon="el-icon-edit"
          style="padding: 0; margin-left: 4px; height: 18px; line-height: 18px"
          >编辑</el-button
        >
      </template>
    </commonDetail>
    <commonDetail
      class="commonDetail"
      :colSpan="8"
      :data="{}"
      :definition="definition2"
    ></commonDetail>
  </div>
</template>

<script>
import commonDetail from "./index.vue";
export default {
  components: {
    commonDetail,
  },
  name: "Detail",
  data() {
    return {
      definition2: [
        {
          label: "标签1",
          content: "内容1",
        },
        {
          label: "标签2",
          content: "内容2",
        },
        {
          label: "标签3",
          content: "内容3",
        },
        {
          label: "标签4",
          content: "内容4",
        },
      ],
      definition: [
        {
          label: "姓名", // 详情的标签
          key: "user.name", // 详情对应的key
          format: (v) => {
            return "<span style='color:red '>红色AAA</span>" + v; //自定义详情展示内容
          },
          titleFormat: (v) => {
            return "自定义鼠标悬浮的内容" + v; // 自定义详情鼠标悬浮展示内容
          },
          colSpan: 16, // 自定义该列所占栅格数
          // exist: false,
        },
        {
          label: "年龄",
          key: "user.age",
          exist: () => {
            return 1 < 2;
          },
        },

        { label: "其他信息2", key: "key2" },
        {
          label: "其他信息3",
          key: "key3",
          format: () => {
            return "";
          },
        },
        {
          label: "其他信息1",
          key: "key1",
          textEllipsis: false,
        },
      ],
      data: {
        name: "张三",
        key1: "超出换行：信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1",

        key2: "信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2信息2",
        key3: "信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3",
        user: {
          name: "张三",
          age: "18信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3信息3",
        },
      },
    };
  },
};
</script>

<style scoped>
.commonDetail {
  border: 16px solid #f1f1f1;
  padding: 16px;
}
</style>
